{% extends "tools/base_tool.html" %}

{% block custom_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/pdf-editor.css') }}">
{% endblock %}

{% block content %}
<div id="pdf-editor-app" class="container-fluid mt-3">
    <!-- Upload Section -->
    <div id="upload-section" v-if="!pdfLoaded" class="d-flex justify-content-center align-items-center vh-100">
        <div class="card p-4 text-center">
            <h2>{{ get_text('upload_your_pdf_title') }}</h2>

            <p class="mb-2">{{ get_text('upload_standard_instruction') }}</p>
            <input type="file" id="pdf-upload" @change="handlePDFUpload" accept=".pdf" class="form-control mb-3">

            <p class="my-2 fw-bold">{{ get_text('or_text') }}</p>

            <p class="mb-2">{{ get_text('upload_instruction_note') }}</p>
            <p>{{ get_text('drag_drop_pdf_note') }}</p>
            <div v-if="!pdfLoaded && !uploadError" class="alert alert-info">{{ get_text('no_pdf_uploaded') }}</div>
            <!-- <div v-if="uploadError" class="alert alert-danger">{{ uploadError }}</div> -->
        </div>
    </div>

    <!-- Editor Section -->
    <div id="editor-section" v-if="pdfLoaded && editorActive" class="row g-0">
        <!-- Top Bar -->
        <div id="top-bar" class="col-12 bg-light p-2 mb-2 border-bottom">
            <ul class="nav nav-tabs" id="editor-tabs">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#annotate-tab-pane">{{ get_text('annotate_tab_label') }}</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#edit-tab-pane">{{ get_text('edit_tab_label') }}</button>
                </li>
            </ul>
            <div class="tab-content pt-2">
                <div class="tab-pane fade show active" id="annotate-tab-pane">
                    <!-- Annotate Tools -->
                    <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group me-2 mb-2" role="group">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="add-text-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-font"></i> {{ get_text('add_text') }}
                                </button>
                                <ul class="dropdown-menu p-3" aria-labelledby="add-text-dropdown" style="width: 300px;">
                                    <li>
                                        <label for="font-family" class="form-label">{{ get_text('font_family') }}</label>
                                        <select id="font-family" v-model="textAnnotation.fontFamily" class="form-select form-select-sm mb-2">
                                            <option>Arial</option>
                                            <option>Times New Roman</option>
                                            <option>Courier New</option>
                                        </select>
                                    </li>
                                    <li>
                                        <label for="font-size" class="form-label">{{ get_text('font_size') }}</label>
                                        <select id="font-size" v-model.number="textAnnotation.fontSize" class="form-select form-select-sm mb-2">
                                            <option value="12">12</option>
                                            <option value="16">16</option>
                                            <option value="20">20</option>
                                            <option value="24">24</option>
                                        </select>
                                    </li>
                                    <li class="mb-2">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="bold" v-model="textAnnotation.bold">
                                            <label class="form-check-label" for="bold">{{ get_text('bold') }}</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="italic" v-model="textAnnotation.italic">
                                            <label class="form-check-label" for="italic">{{ get_text('italic') }}</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="underline" v-model="textAnnotation.underline">
                                            <label class="form-check-label" for="underline">{{ get_text('underline') }}</label>
                                        </div>
                                    </li>
                                    <li class="mb-2">
                                        <label for="font-color" class="form-label">{{ get_text('font_color') }}</label>
                                        <input type="color" id="font-color" v-model="textAnnotation.fontColor" class="form-control form-control-sm form-control-color">
                                    </li>
                                    <li class="mb-2">
                                        <label for="bg-color" class="form-label">{{ get_text('bg_color') }}</label>
                                        <input type="color" id="bg-color" v-model="textAnnotation.bgColor" class="form-control form-control-sm form-control-color">
                                    </li>
                                    <li class="mb-2">
                                        <label for="align" class="form-label">{{ get_text('align') }}</label>
                                        <select id="align" v-model="textAnnotation.textAlign" class="form-select form-select-sm">
                                            <option value="left">{{ get_text('align_left') }}</option>
                                            <option value="center">{{ get_text('align_center') }}</option>
                                            <option value="right">{{ get_text('align_right') }}</option>
                                        </select>
                                    </li>
                                    <li class="mb-2">
                                        <label for="opacity" class="form-label">{{ get_text('opacity') }} ({% raw %}{{ textAnnotation.opacity }}{% endraw %})</label>
                                        <input type="range" id="opacity" v-model.number="textAnnotation.opacity" min="0" max="1" step="0.1" class="form-range">
                                    </li>
                                    <li><button class="btn btn-primary btn-sm w-100" @click="activateTextMode">{{ get_text('apply_add_text') }}</button></li>
                                </ul>
                            </div>
                        </div>
                        <div class="btn-group me-2 mb-2" role="group">
                            <label for="add-image-input" class="btn btn-secondary">
                                <i class="fas fa-image"></i> {{ get_text('add_image') }}
                            </label>
                            <input type="file" id="add-image-input" @change="addImageAnnotation" accept="image/*" style="display: none;">
                        </div>
                        <div class="btn-group me-2 mb-2" role="group">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="draw-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-pencil-alt"></i> {{ get_text('draw') }}
                                </button>
                                <ul class="dropdown-menu p-3" aria-labelledby="draw-dropdown" style="width: 250px;">
                                    <li class="mb-2">
                                        <label for="pen-color" class="form-label">{{ get_text('pen_color') }}</label>
                                        <input type="color" id="pen-color" v-model="drawingMode.penColor" class="form-control form-control-sm form-control-color">
                                    </li>
                                    <li class="mb-2">
                                        <label for="pen-width" class="form-label">{{ get_text('pen_width') }} ({% raw %}{{ drawingMode.penWidth }}{% endraw %})</label>
                                        <input type="range" id="pen-width" v-model.number="drawingMode.penWidth" min="1" max="10" step="1" class="form-range">
                                    </li>
                                    <li><button class="btn btn-primary btn-sm w-100" @click="enableDrawingMode">{{ get_text('activate_draw_mode') }}</button></li>
                                </ul>
                            </div>
                        </div>
                        <div class="btn-group me-2 mb-2" role="group">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="shapes-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-shapes"></i> {{ get_text('shapes') }}
                                </button>
                                <ul class="dropdown-menu p-3" aria-labelledby="shapes-dropdown" style="width: 300px;">
                                    <li class="mb-2">
                                        <label for="shape-type" class="form-label">{{ get_text('shape_type') }}</label>
                                        <select id="shape-type" v-model="shapeAnnotation.type" class="form-select form-select-sm">
                                            <option value="Line">{{ get_text('shape_line') }}</option>
                                            <option value="Rectangle">{{ get_text('shape_rectangle') }}</option>
                                            <option value="Circle">{{ get_text('shape_circle') }}</option>
                                            <option value="Symbol">{{ get_text('shape_symbol') }}</option>
                                        </select>
                                    </li>
                                    <li class="mb-2">
                                        <label for="shape-bg-color" class="form-label">{{ get_text('shape_bg_color') }}</label>
                                        <input type="color" id="shape-bg-color" v-model="shapeAnnotation.bgColor" class="form-control form-control-sm form-control-color">
                                    </li>
                                    <li class="mb-2">
                                        <label for="shape-border-color" class="form-label">{{ get_text('shape_border_color') }}</label>
                                        <input type="color" id="shape-border-color" v-model="shapeAnnotation.borderColor" class="form-control form-control-sm form-control-color">
                                    </li>
                                    <li class="mb-2">
                                        <label for="shape-border-width" class="form-label">{{ get_text('shape_border_width') }} ({% raw %}{{ shapeAnnotation.borderWidth }}{% endraw %})</label>
                                        <input type="range" id="shape-border-width" v-model.number="shapeAnnotation.borderWidth" min="1" max="10" step="1" class="form-range">
                                    </li>
                                    <li class="mb-2" v-if="shapeAnnotation.type === 'Rectangle'">
                                        <label for="shape-border-radius" class="form-label">{{ get_text('shape_border_radius') }} ({% raw %}{{ shapeAnnotation.borderRadius }}{% endraw %})</label>
                                        <input type="range" id="shape-border-radius" v-model.number="shapeAnnotation.borderRadius" min="0" max="20" step="1" class="form-range">
                                    </li>
                                    <li class="mb-2">
                                        <label for="shape-opacity" class="form-label">{{ get_text('shape_opacity') }} ({% raw %}{{ shapeAnnotation.opacity }}{% endraw %})</label>
                                        <input type="range" id="shape-opacity" v-model.number="shapeAnnotation.opacity" min="0" max="1" step="0.1" class="form-range">
                                    </li>
                                     <li class="mb-2">
                                        <label for="shape-rotation" class="form-label">{{ get_text('shape_rotation') }} ({% raw %}{{ shapeAnnotation.rotation }}{% endraw %}°)</label>
                                        <input type="range" id="shape-rotation" v-model.number="shapeAnnotation.rotation" min="0" max="360" step="1" class="form-range">
                                    </li>
                                    <li><button class="btn btn-primary btn-sm w-100" @click="activateShapeMode">{{ get_text('apply_add_shape') }}</button></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="edit-tab-pane">
                    <!-- Edit Tools -->
                    <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group me-2 mb-2" role="group">
                            <button type="button" class="btn btn-secondary" @click="editText"><i class="fas fa-edit"></i> {{ get_text('edit_text_content') }}</button>
                        </div>
                        <div class="btn-group me-2 mb-2" role="group">
                            <button type="button" class="btn btn-secondary" @click="editImage"><i class="fas fa-image-edit"></i> {{ get_text('edit_image_content') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Area -->
        <div id="main-content" class="col-12 d-flex" style="height: calc(100vh - 120px);"> 
            <!-- Left Sidebar: Page Thumbnails -->
            <div id="left-sidebar" class="bg-light border-end p-2" style="width: 200px; overflow-y: auto;">
                <h5>{{ get_text('page_thumbnails') }}</h5>
                <div v-for="n in numPages" :key="n" 
                     class="thumbnail-item p-1 mb-1 border rounded text-center"
                     :class="{ 'active-thumbnail': n === currentPage }"
                     @click="switchPage(n)">
                    <canvas :id="'thumb-canvas-' + n" class="img-thumbnail"></canvas>
                    <small>{{ get_text('page') }} {% raw %}{{ n }}{% endraw %}</small>
                </div>
            </div>

            <!-- PDF Viewer -->
            <div id="pdf-viewer" class="flex-grow-1 d-flex flex-column p-2 position-relative" style="overflow: auto;">
                <div class="pdf-canvas-container flex-grow-1 d-flex justify-content-center align-items-start" style="overflow: auto;">
                    <canvas id="pdf-canvas" class="border shadow-sm"></canvas>
                </div>
                 <!-- PDF Controls -->
                <div id="pdf-controls" class="d-flex justify-content-center align-items-center p-2 bg-light border-top mt-auto">
                    <button class="btn btn-sm btn-outline-secondary me-1" @click="prevPage" :disabled="currentPage <= 1"><i class="fas fa-arrow-left"></i> {{ get_text('previous_page') }}</button>
                    <span class="me-2">{{ get_text('page') }} {% raw %}{{ currentPage }}{% endraw %} / {% raw %}{{ numPages }}{% endraw %}</span>
                    <button class="btn btn-sm btn-outline-secondary ms-1" @click="nextPage" :disabled="currentPage >= numPages">{{ get_text('next_page') }} <i class="fas fa-arrow-right"></i></button>
                    
                    <button class="btn btn-sm btn-outline-secondary ms-3" @click="zoomOut"><i class="fas fa-search-minus"></i></button>
                    <input type="number" v-model.number="zoomLevelInput" @change="setZoomLevelManually" class="form-control form-control-sm mx-1" style="width: 70px; text-align: center;" :placeholder="(zoomLevel * 100).toFixed(0) + '%'">
                    <button class="btn btn-sm btn-outline-secondary" @click="zoomIn"><i class="fas fa-search-plus"></i></button>
                    
                    <button class="btn btn-sm btn-outline-secondary ms-3" @click="fitWidth">{{ get_text('fit_width') }}</button>
                    
                    <select v-model="displayMode" @change="setDisplayMode" class="form-select form-select-sm ms-3" style="width: auto;">
                        <option value="single">{{ get_text('display_single_page') }}</option>
                        <option value="double">{{ get_text('display_double_page') }}</option>
                        <option value="cover">{{ get_text('display_cover_page') }}</option>
                    </select>
                </div>
            </div>

            <!-- Right Sidebar: History & Export -->
            <div id="right-sidebar" class="bg-light border-start p-2" style="width: 250px; overflow-y: auto;">
                <h5>{{ get_text('history_panel_title') }}</h5>
                <ul class="list-group list-group-flush" v-if="annotationHistory.length > 0">
                    <li v-for="(item, index) in annotationHistory" :key="index" class="list-group-item d-flex justify-content-between align-items-center p-1">
                        <small class="text-truncate" :title="item.description">{% raw %}{{ item.description }}{% endraw %}</small>
                        <div>
                            <button class="btn btn-sm btn-outline-primary py-0 px-1 me-1" @click="editHistoryItem(index)" :title="get_text('edit_history_item')"><i class="fas fa-edit"></i></button>
                            <button class="btn btn-sm btn-outline-danger py-0 px-1" @click="deleteHistoryItem(index)" :title="get_text('delete_history_item')"><i class="fas fa-trash"></i></button>
                        </div>
                    </li>
                </ul>
                <p v-else class="text-muted small">{{ get_text('no_history_items') }}</p>
                
                <button id="reupload-button" @click="resetEditorState" class="btn btn-secondary w-100 mb-2">{{ get_text('reupload_pdf') }}</button>
                <button id="export-button" @click="exportPDF" class="btn btn-success w-100">{{ get_text('export_pdf') }}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block custom_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.107/pdf.min.js"></script>
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.107/pdf.worker.min.js';</script>
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="{{ url_for('static', filename='js/pdf-editor.js') }}"></script>
{% endblock %}